<template>
  <div class="main">
    <mu-appbar :z-depth="4" color="#F17C67">
    校卡查询
  </mu-appbar>
    <cube-form
  :model="model"
  :schema="schema"
  :immediate-validate="false"
  :options="options"
  @validate="validateHandler"
  @submit="submitHandler"
  @reset="resetHandler"
  ></cube-form>
  </div>
</template>

<script>
export default {
  name: 'Query',
  props: {
    msg: String
  },
   data() {
    return {
      validity: {},
      valid: undefined,
      model: {
        stuno: '',
        passwd: '',
        money: 50
      },
      schema: {
        groups: [
          {
            legend: '',
            fields: [
              
              {
                type: 'input',
                modelKey: 'stuno',
                label: '校卡学号',
                props: {
                  placeholder: '请输入学号',
                  clearable:true,
                  type:'number'
                },
                rules: {
                  required: true,
                  custom: (val) => {
                  return val.length >= 7
                  }
                },
                messages:{
                  required:'请输入学号',
                  custom:'学号位数大于等于7位'
                },
                // validating when blur
                trigger: 'blur'
              },
              {
                type: 'input',
                modelKey: 'passwd',
                label: '校卡密码',
                props: {
                  placeholder: '请输入校卡密码',
                  type:'password',
                  eye:true,
                  clearable:true
                },
                rules: {
                  required: true
                },
                // validating when blur
                trigger: 'blur'
              },
             
              
            ]
          },
          {
            fields: [
              {
                type: 'submit',
                label: '查询',
                props:{
                  primary:true
                }
              },
              {
                type: 'reset',
                label: '重置'
              }
            ]
          }
        ]
      },
      options: {
        scrollToInvalidField: true,
        layout: 'standard' // classic fresh
      }
    }
  },
  methods: {
    submitHandler(e) {
      e.preventDefault()
      console.log('submit', e)
       const toast = this.$createToast({
        time: 1000,
        txt: '正在充值...'
      })
      toast.show()
      this.$router.push("/payok")
    },
    validateHandler(result) {
      this.validity = result.validity
      this.valid = result.valid
      console.log('validity', result.validity, result.valid, result.dirty, result.firstInvalidFieldIndex)
    },
    resetHandler(e) {
      // console.log('reset', e)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
